<template>
  <Div class="system">
      <Row class="nav">
          <Form>
              <FormItem>
                  <Label>关键字</Label>
                  <Input placeholder="请输入..." v-model="searchForm.keyword"></Input>
              </FormItem>
              <FormItem>
                  <Label>发布时间</Label>
                   <Date-picker type="daterange" placeholder="选择日期和时间" format="yyyy-MM-dd" @on-change="valformat"></Date-picker>
              </FormItem>
              <FormItem>
                  <Button icon="ios-search" @click="search">确认</Button>
              </FormItem>
          </Form>
      </Row>
      <Row>
          <Table :columns="system_title" :data="system_data"></Table>
          <Page :total="page.total" :page-size="page.pageSize" show-elevator show-total class-name="page" @on-change="handlePage"></Page>
      </Row>
  </Div>
</template>

<script>
import { noticeInit, noticeSearchInit, noticePageInit } from '@/api/notice'

export default {
    name: 'notice',
    data(){
        return{
            searchForm: {
                keyword: '',
                start: '',
                end: ''
            },
            system_title:[
                {
                    title: '序号',
                    align: 'center',
                    key: 'id'
                },
                {
                    title: '标题',
                    align: 'center',
                    key :'title'
                },
                {
                    title: '作者',
                    align: 'center',
                    key: 'author'
                },
                {
                    title: '发布时间',
                    align: 'center',
                    key: 'created_at'
                },
                {
                    title: '状态',
                    align: 'center',
                    key: 'status'
                },
                {
                    title: '操作',
                    align: 'center',
                    render:(h,params)=>{
                        return h('Button',{
                            props:{
                                type: 'text'
                            },
                            style: {
                                color:'#0078ff'
                            },
                            on:{
                                click: () => {
                                    this.to(params.row.id)
                                }
                            }
                        },'查看')
                    }
                }
            ],
            system_data: [],
            page: {
                total: 0,
                pageSize: 0
            }
        }
    },
    methods:{
        init() {
            noticeInit().then(Response => {
                this.system_data = Response.data.data.notices
                this.page.total = Response.data.data.total
                this.page.pageSize = Response.data.data.size
            })
        },
        search() {
            noticeSearchInit(this.searchForm).then(Response => {
                this.system_data = Response.data.data.notices
                this.page.total = Response.data.data.total
            })
        },
        handlePage(v) {
            noticePageInit(v, this.searchForm).then(Response => {
                this.system_data = Response.data.data.notices
            })
        },
        valformat(v) {
            if (v) {
                this.searchForm.start = v[0]
                this.searchForm.end = v[1]
            }
        },
        to(id) {
            this.$router.push({name:'notice_list',query: { id: id }})
        }
    },
    created() {
        this.init()
    }
}
</script>

<style scoped lang="less">
    @import 'system.less';
</style>
